<template>
  <page-frame>
    <div class="addServcieItems">
      <div class="toptitle">
        <div class="left">服务项目-添加服务项目</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="saveItem('ruleForm')" v-if="!ways">保存</el-button>
            <router-link :to="{name:'serviceItems'}"><el-button>返回</el-button></router-link>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="labelPosition" label-width="80px" class="demo-ruleForm">
        <div class="panel">
          <div class="panel-title first">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">基本信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-row>
              <el-col :span="10" v-if="way!=1">
                <el-form-item label="服务编号" prop="serviceNo">
                  <el-input v-model="ruleForm.serviceNo" placeholder="请填写服务编号" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="height: 1px;" v-if="way!=1">
              </el-col>
              <el-col :span="10">
                <el-form-item label="服务项目" prop="serviceName">
                  <el-input v-model="ruleForm.serviceName"  placeholder="请填写服务项目" :disabled="ways"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="服务类别" prop="typeId">
                  <el-select v-model="ruleForm.typeId" placeholder="请选择服务类别" :disabled="ways">
                    <el-option
                      v-for="item in typeList"
                      :label="item.typeName"
                      :value="item.typeId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="height: 1px;">
              </el-col>
              <el-col :span="10">
                <el-form-item label="服务范围" prop="scope">
                  <el-radio-group v-model="ruleForm.scope">
                    <el-radio
                      :label="range.rangeId"
                      :disabled="ways"
                      v-for="range in rangeList">
                      {{range.rangeName}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="服务频次" prop="period">
                  <el-radio-group v-model="ruleForm.period" @change="changePeriod">
                    <el-radio
                      :label="frequency.frequencyId"
                      :disabled="ways"
                      v-for="frequency in frequencyList">
                      {{frequency.frequencyName}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="height: 1px;">
              </el-col>
            </el-row>
            <el-row v-if="ruleForm.period==0">
              <el-col :span="10" >
                <el-form-item
                  v-for="(time, index) in serviceTimeList"
                  :label="'选择时间'"
                >
                  <el-time-picker
                    is-range
                    format="HH:mm:ss"
                    v-model="serviceTimeList[index]"
                    :disabled="ways"
                    placeholder="选择时间">
                  </el-time-picker>
                  <span v-if="!ways">
                    <el-button type="text" v-if="serviceTimeList.length!=1" @click.prevent="removeTime(time)">删除</el-button>
                  </span>
                  <span v-if="!ways">
                    <el-button type="text" v-if="index==serviceTimeList.length-1" @click.prevent="addTime">新增</el-button>
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22" class="des">
                <el-form-item label="服务描述" prop="description">
                  <quill-editor
                  style="height:200px;"
                  ref="myTextEditor"
                  v-model="ruleForm.description"
                  @enable="isEditor"
                  :options="editorOption"
                  >
                  </quill-editor>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title free">
            <div class="grid-content bg-purple">计费规则
              <span v-show="ruleForm.scope==null" class="warn">请先前往「服务范围」选择本项目的服务范围</span>
              <span v-show="ruleTableDataLen" class="warn">请添加计费规则</span>
              <el-button  class="fRight lightGreenBtn add" size="small" @click="openRulesBox" v-if="!ways">添加</el-button>
            </div>
          </div>
          <div class="panel-content">
            <el-row>
              <el-table
                :data="ruleTableData"
                border
                @row-dblclick="handleRuleDbClick"
               >
                <el-table-column
                  prop="num"
                  label="计数"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="unitName"
                  label="服务单位"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="inPrice"
                  label="机构内收费(元)"
                  v-if="ruleForm.scope==1||ruleForm.scope==0"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="outPrice"
                  label="机构外收费(元)"
                  v-if="ruleForm.scope==2||ruleForm.scope==0"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="description"
                  label="计费规则描述"
                  width="">
                </el-table-column>
                <el-table-column
                  label="操作"
                  v-if="!ways"
                  width="100">
                  <template scope="scope">
                    <el-button type="text" size="small" v-if="currentServiceId==-1" @click.stop="editRules(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" v-if="currentServiceId==-1" @click.stop="delRules(scope.$index,scope.row,ruleTableData)">删除</el-button>
                    <el-button type="text" size="small" v-if="currentServiceId!=-1" @click.stop="editRules(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" v-if="currentServiceId!=-1" @click.stop="delRules(scope.$index,scope.row,ruleTableData)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </div>
        </div>

        <div class="panel">
          <div class="panel-title">
            <div class="grid-content bg-purple">服务内容
              <span v-show="recordingTableDataLen" class="warn">请添加服务内容</span>
              <el-button  class="fRight lightGreenBtn add" size="small"  @click="openContentBox" v-if="!ways">添加</el-button>
            </div>
          </div>

          <div class="panel-content">
            <el-row>
              <el-table
                :data="recordingTableData"
                @row-dblclick="handleContentDbClick"
                border>
                <el-table-column
                  prop="content"
                  label="服务名称"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="rerultTypeName"
                  label="类型"
                  width="">
                </el-table-column>
                <el-table-column
                  label="选项/区间值"
                  v-if="way!=1"
                  prop="optionalValue"
                  width="">
                </el-table-column>
                <el-table-column
                  label="选项/区间值"
                  v-if="way==1"
                  width="">
                  <template scope="scope">
                    <span v-if="scope.row.resultType==3||scope.row.resultType==2" v-for="(item,index) in scope.row.selectItems">{{item}}<span v-if="index!=(scope.row.selectItems.length-1)">,</span></span>
                    <span v-if="scope.row.resultType==1">{{scope.row.minValue}},{{scope.row.maxValue}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="defaultValue"
                  label="默认值"
                  width="">
                </el-table-column>
                <el-table-column
                  label="操作"
                  v-if="!ways"
                  width="100">
                  <template scope="scope">
                    <el-button type="text" size="small" v-if="currentServiceId==-1" @click.stop="editRecording(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" v-if="currentServiceId==-1" @click.stop="delRecording(scope.$index,scope.row,recordingTableData)">删除</el-button>
                    <el-button type="text" size="small" v-if="currentServiceId!=-1" @click.stop="editRecording(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" v-if="currentServiceId!=-1" @click.stop="delRecording(scope.$index,scope.row,recordingTableData)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </div>
        </div>
      </el-form>

      <!--计费规则弹框-->
      <el-dialog :title="billingRulesTitle" :visible.sync="billingRules" size="tiny" :close-on-click-modal="false">
        <el-form :model="billingRulesForm">
          <el-form-item label="计费单位" :label-width="formLabelWidth">
            <el-col :span="19">
              <el-input
                placeholder="请输入内容"
                class="unitInput"
                :disabled="billRuleStatus"
                v-model="billingRulesForm.num">
              </el-input>
            </el-col>
            <el-col :span="5">
              <el-select v-model="billingRulesForm.unit" :disabled="billRuleStatus" class="unitSelect" placeholder="">
                <el-option :label="unit.name" :value="unit.id" v-for="unit in unitsList"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="机构内收费" v-if="ruleForm.scope==1||ruleForm.scope==0" :label-width="formLabelWidth">
            <el-input
              v-model="billingRulesForm.inPrice"
              style="width:80%!important"
              :disabled="billRuleStatus"
              auto-complete="off">
            </el-input>
            <span>元</span>
          </el-form-item>
          <el-form-item label="机构外收费" v-if="ruleForm.scope==2||ruleForm.scope==0" :label-width="formLabelWidth">
            <el-input
              v-model="billingRulesForm.outPrice"
              style="width:80%!important"
              :disabled="billRuleStatus"
              auto-complete="off">
            </el-input>
            <span>元</span>
          </el-form-item>
          <el-form-item label="计费规则描述" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="billingRulesForm.description"
              auto-complete="off"
              style="width:100%!important"
              :disabled="billRuleStatus"
              placeholder="输入该服务项目的描述，不超过 20 字">
            </el-input>
          </el-form-item>
          <el-form-item label="温馨提示" :label-width="formLabelWidth">
            <div class="tips">
              <p>1. 计费单位 / 收费输入框输入数字即可</p>
              <p>2. 计费规则描述不超过 30 字</p>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="billingRules = false" v-if="ruleWay!=0">取 消</el-button>
          <el-button type="primary" @click="billingRules = false" v-if="ruleWay==0">确 定</el-button>
          <el-button type="primary" v-if="ruleWay==1&&currentServiceId==-1" @click="addBillingRules">确 定</el-button>
          <el-button type="primary" v-if="ruleWay==2&&currentServiceId==-1" @click="editBillingRules">确 定</el-button>

          <el-button type="primary" v-if="ruleWay==1&&currentServiceId!=-1" @click="addBillingRules">确 定</el-button>
          <el-button type="primary" v-if="ruleWay==2&&currentServiceId!=-1" @click="editBillingRules">确 定</el-button>
        </div>
      </el-dialog>

      <!--添加服务内容弹框-->
      <el-dialog :title="contentTitle" :visible.sync="serviceRecord" size="tiny" :close-on-click-modal="false">
        <el-form :model="serviceRecordForm">
          <div class="addItemsDialog">
            <el-form-item label="名称" :label-width="formLabelWidth" prop="content">
              <el-input :disabled="serviceContentStatus" v-model="serviceRecordForm.content" placeholder="请输入您的服务内容名称"></el-input>
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth" prop="resultType">
              <el-radio-group v-model="serviceRecordForm.resultType" @change="selectRadio">
                <el-radio :label="typeItem.id" :disabled="serviceContentStatus" :key="typeItem.id" v-for="typeItem in recordTypeList">{{typeItem.name}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <!--多选-->
            <el-form-item
              v-if="serviceRecordForm.resultType==3||serviceRecordForm.resultType==2"
              v-for="(selectItem, i) in serviceRecordForm.selectItems"
              :label-width="formLabelWidth"
              :label="'选项值'"
            >
              <el-col :span="19">
                <el-input v-model="serviceRecordForm.selectItems[i]" placeholder="请输入选项值" :disabled="serviceContentStatus"></el-input>
              </el-col>
              <el-col :span="5" style="" v-if="contentWay!=0">
                <el-button style="margin-left:5px;" type="text" v-if="serviceRecordForm.selectItems.length!=1" @click.prevent="removeSelectItem(selectItem,i)">删除</el-button>
                <el-button :class="i==(serviceRecordForm.selectItems.length-1) ? 'addItems':''" type="text" v-if="i==serviceRecordForm.selectItems.length-1" @click.prevent="addSelectItem">增加</el-button>
              </el-col>
            </el-form-item>
            <!--添加默认项 多选-->
            <el-form-item v-if="serviceRecordForm.resultType==3" label="默认选项" :label-width="formLabelWidth" prop="defaultValue">
              <el-select placeholder="请选择默认选项值" :disabled="serviceContentStatus" multiple v-model="serviceRecordForm.defaultValue">
                <el-option
                  v-for="item in serviceRecordForm.selectItems"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <!--添加默认项 单选-->
            <el-form-item v-if="serviceRecordForm.resultType==2" label="默认选项" :label-width="formLabelWidth" prop="defaultValue">
              <el-select placeholder="请选择默认选项值" :disabled="serviceContentStatus" v-model="serviceRecordForm.defaultValue">
                <el-option
                  v-for="item in serviceRecordForm.selectItems"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <!--输入正常值区间-->
            <el-form-item
              v-if="serviceRecordForm.resultType==1"
              label="区间值"
              :label-width="formLabelWidth"
            >
              <el-col :span="11">
                <el-input :disabled="serviceContentStatus" @blur="selectNormalNum" v-model="serviceRecordForm.minValue" placeholder="请输入起始区间值"></el-input>
              </el-col>
              <el-col :span="1" style="text-align:center;">-</el-col>
              <el-col :span="11">
                <el-input :disabled="serviceContentStatus" @blur="selectNormalNum" v-model="serviceRecordForm.maxValue" placeholder="请输入终止区间值"></el-input>
              </el-col>
            </el-form-item>
            <!--输入默认值区间-->
            <el-form-item
              v-if="serviceRecordForm.resultType==1"
              label="默认值"
              :label-width="formLabelWidth"
            >
              <el-col :span="23">
                <el-input type="number" :disabled="serviceContentStatus" v-model="serviceRecordForm.defaultValue" @blur="inputDefault" placeholder="请输入默认值"></el-input>
              </el-col>
            </el-form-item>
            <el-col :offset="7" class="defaultWarn" v-if="defaultWarn">*默认值需在正常值区间内</el-col>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="serviceRecord = false" v-if="contentWay==1||contentWay==2">取 消</el-button>
          <el-button type="primary" v-if="contentWay==0&&currentServiceId==-1" @click="serviceRecord = false">确 定</el-button>
          <el-button type="primary" v-if="contentWay==1&&currentServiceId==-1" @click="addContent">确 定</el-button>
          <el-button type="primary" v-if="contentWay==2&&currentServiceId==-1" @click="editContent">确 定</el-button>

          <el-button type="primary" v-if="contentWay==0&&currentServiceId!=-1" @click="serviceRecord = false">确 定</el-button>
          <el-button type="primary" v-if="contentWay==1&&currentServiceId!=-1" @click="addContent">确 定</el-button>
          <el-button type="primary" v-if="contentWay==2&&currentServiceId!=-1" @click="editContent">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </page-frame>
</template>

<script >
  import {quillEditor} from  'vue-quill-editor';
  import serviceItemsApi from '../../service/serManagement/serviceItemApi';
  import commonJs from '../../config/common';
  export default {
    data () {
      return {
        editorOption:{
          placeholder: '请填写服务描述',
        },
        billingRulesTitle:'',
        contentTitle:'',
        way:null,
        ways:false,
        currentServiceId:null,
        formLabelWidth:'110px',
        labelPosition: 'right',
        ruleForm:{
          serviceNo:'',
          serviceName:'',
          typeId:1,
          scope:1,
          period:0,
          time: [],
          serviceTimeList:[],
          description:'',
          addServiceChargeDTOs:[],
          addServiceContentDTOs:[],
        },
        serviceTimeList:[[]],
        rules:{
          serviceName:[
            { required: true, message: '请输入服务项目', trigger: 'blur' },
          ],
          typeId:[
            { type:'number', required: true, message: '请选择服务类别', trigger: 'change' },
          ],
          scope:[
            {type:'number',required: true, message: '请选择服务范围', trigger: 'change'},
          ],
          description:[
            {required: true, message: '请填写描述信息', trigger: 'blur'},
          ],
        },
        typeList:[
          {
            typeId:1,
            typeName:"生活类",
          },{
            typeId:2,
            typeName:"医疗类",
          },{
            typeId:3,
            typeName:"护理类",
          },{
            typeId:4,
            typeName:"康复类",
          },{
            typeId:5,
            typeName:"保健类",
          },{
            typeId:6,
            typeName:"增值类",
          },{
            typeId:7,
            typeName:"其他",
          }
        ],
        rangeList:[
          {
            rangeId:1,
            rangeName:'仅限机构内',
          },{
            rangeId:2,
            rangeName:'仅限机构外',
          }
        ],
        frequencyList:[
          {
            frequencyId:3,
            frequencyName:'任意'
          },{
            frequencyId:0,
            frequencyName:'每天'
          },{
            frequencyId:1,
            frequencyName:'每周'
          },{
            frequencyId:2,
            frequencyName:'每月'
          }
        ],
        ruleTableData:[],
        ruleTableDataLen:false,
        billingRules:false,
        serviceRecord:false,
        defaultWarn:false,
        ruleWay:null,
        contentWay:null,
        oldResultType:'',
        billingRulesForm:{
          rulesId:null,
          num:null,
          unit:1,
          inPrice:'',
          outPrice:'',
          description:'',
        },
        billingRulesIndex:0,
        serviceContentIndex:0,
        nowRuleIndex:null,
        nowContentIndex:null,
        unitsList:[{
          id:1,
          name:'次'
        },{
          id:2,
          name:'月'
        }],
        billRuleStatus:false,
        serviceContentStatus:false,
        recordingTableData:[],
        recordingTableDataLen:false,
        serviceRecordForm:{
          serviceContentId:null,
          content:'',
          resultType:1,
          defaultValue:'',
          optionalValue:'',
          selectItems:[null],
          serviceId: null,
          minValue:'',
          maxValue:''
        },
        recordTypeList:[{
          id:3,
          name:'多选'
        },{
          id:2,
          name:'单选'
        },{
          id:1,
          name:'输入'
        }],
      }
    },
    methods: {
      init() {
        this.way = this.$route.params.way;
        this.currentServiceId = this.$route.params.serviceId;
        if(this.$route.params.way==0){//获取服务项目详情信息
          this.ways=true;
          this.loadBaseData(this.currentServiceId);
          this.isEditor(false);
        }else if(this.$route.params.way==1){//添加新的服务项目
          this.ways=false;
          this.isEditor(true);
        }else if(this.$route.params.way==2){//编辑服务项目
          this.ways=false;
          this.loadBaseData(this.currentServiceId);
          this.isEditor(true);
        }
      },
      /**
       * 更改服务频次
       */
      changePeriod(){
        //将选择时间清空
        this.serviceTimeList = [[]];
      },
      /**
       * 新增时间
       */
      addTime() {
        this.serviceTimeList.push([]);
      },
      /**
       * 删除时间
       */
      removeTime(item) {
        var index = this.serviceTimeList.indexOf(item);
        if (index !== -1) {
          this.serviceTimeList.splice(index, 1);
        }
      },
      /**
       * 详情  加载基本数据
       */
      loadBaseData(serviceId){
        let self = this;
        serviceItemsApi.getServiceItemInfo(serviceId).then(
          (response)=>{
            self.ruleForm = response.data.data;
            //回显时间
            if(self.ruleForm.serviceTimeList.length==0){
              self.serviceTimeList = [[]];
            }else{
              self.serviceTimeList = commonJs.formateTimeToArr(self.ruleForm.serviceTimeList);
            }

            //load计费规则
            self.ruleTableData = self.ruleForm.addServiceChargeDTOs;
            self.loadRulesTableData();
            //load服务内容
            self.recordingTableData = self.ruleForm.addServiceContentDTOs;
            self.switchServiceContentType();
          }
        );
      },
      /**
       * （禁止/允许）编辑富文本编辑器
       */
      isEditor(status){
        this.$refs.myTextEditor.quill.enable(status);
      },
      /**
       * 按钮  保存项目
       */
      saveItem(formName){
        let self = this;
        //将时间赋值到ruleForm中
        self.ruleForm.serviceTimeList = self.serviceTimeList;
        for(let i=0;i<self.ruleForm.serviceTimeList.length;i++){
          for(let k = 0;k<self.ruleForm.serviceTimeList[i].length;k++){
            self.ruleForm.serviceTimeList[i][k] = commonJs.formatTime(self.ruleForm.serviceTimeList[i][k]);
          }
        }

        //将计费规则、服务内容数据传到相应的数组里
        self.ruleForm.addServiceChargeDTOs = self.ruleTableData;
        self.ruleForm.addServiceContentDTOs = self.recordingTableData;
        //清除富文本编辑器多余的p标签
        this.ruleForm.description = this.ruleForm.description.substring(3,this.ruleForm.description.length-4);

        self.$refs[formName].validate((valid) => {
          if (valid) {

            //判断计费规则数据是否为空(计费规则必填)
            if(self.ruleForm.addServiceChargeDTOs.length==0){
              self.ruleTableDataLen=true;
              return;
            }else{
              self.ruleTableDataLen=false;
            }
            //判断服务内容数据是否为空(服务内容必填)
            if(self.ruleForm.addServiceContentDTOs.length==0){
              self.recordingTableDataLen = true;
              return;
            }else{
              self.recordingTableDataLen = false;
            }

            if(self.$route.params.way==1){//新增
              //清空时间
              if(self.ruleForm.period!=0){
                self.serviceTimeList=[[]];
                self.ruleForm.serviceTimeList=[];
              }
              serviceItemsApi.addServiceItem(self.ruleForm).then(
                (response)=>{
                  if(response.data.status==200){
                    self.$message({
                      message: '保存成功',
                      type: 'success'
                    });
                    self.$router.push({name: 'serviceItems',params: { no: 2 }});
                  }
                }
              );
            }else if(self.$route.params.way==2){//编辑
              //清空时间
              if(self.ruleForm.period!=0){
                self.serviceTimeList=[[]];
                self.ruleForm.serviceTimeList=[];
              }
              serviceItemsApi.editServiceItem(self.ruleForm).then(
                (response)=>{
                  self.$message({
                    message: '编辑成功',
                    type: 'success'
                  });
                  self.$router.push({name: 'serviceItems',params: { no: 2 }});
                }
              );
            }
          } else {
//            console.log('error submit!!');
            return false;
          }
        });
      },
      /**
       * 添加计费规则
       */
      openRulesBox(){
        this.billingRules=true;
        this.billRuleStatus = false;
        this.ruleWay = 1;
        this.billingRulesTitle='添加计费规则';
        //清空弹框中的数据
        this.billingRulesForm={
          rulesId:null,
          num:'',
          unit:1,
          inPrice:'',
          outPrice:'',
          description:'',
        };
      },
      /**
       * 加载计费规则表格数据
       */
      loadRulesTableData(){
        //转换类型
        for(var i=0;i<this.ruleTableData.length;i++){
          if(this.ruleTableData[i].unit==1){
            this.ruleTableData[i].unitName = '次';
          }else if(this.ruleTableData[i].unit==2){
            this.ruleTableData[i].unitName = '月';
          }
        }
      },
      /**
       * 服务内容类型转换
       */
      switchServiceContentType(){
        for(var i=0;i<this.recordingTableData.length;i++){
          if(this.recordingTableData[i].resultType==1){
            this.recordingTableData[i].rerultTypeName = '输入';
          }else if(this.recordingTableData[i].resultType==2){
            this.recordingTableData[i].rerultTypeName = '单选';
          }else if(this.recordingTableData[i].resultType==3){
            this.recordingTableData[i].rerultTypeName = '多选';
          }
        }
      },
      /**
       * 弹框  添加计费规则
       */
      addBillingRules(){
        if(this.currentServiceId==-1){
          this.billingRulesIndex++;
          this.billingRulesForm.rulesId=this.billingRulesIndex;
          this.ruleTableData.push(this.billingRulesForm);
          this.billingRules = false;
          this.$message({
            message:'新增计费规则成功',
            type:'success'
          });
          this.loadRulesTableData();
        }else{
          let self = this;
          self.billingRulesForm.serviceId = self.currentServiceId;
          serviceItemsApi.addBillingRules(self.billingRulesForm).then(
            (response)=>{
              if(response.data.status==200){
                self.$message({
                  message:'新增计费规则成功',
                  type:'success'
                });
                self.billingRules = false;
                self.loadBaseData(self.currentServiceId);
              }else{
                self.$message({
                  message:'新增计费规则失败',
                  type:'error'
                });
              }
            }
          );
        }

        this.billingRulesForm={
          rulesId:null,
          num:'',
          unit:1,
          inPrice:'',
          outPrice:'',
          description:'',
        };
      },
      /**
       * 弹框  编辑计费规则(提交)
       */
      editBillingRules(){
        if(this.currentServiceId==-1){
          for(let i=0;i<this.ruleTableData.length;i++){
            if(this.nowRuleIndex==this.ruleTableData[i].rulesId){
              this.ruleTableData[i].num=this.billingRulesForm.num;
              this.ruleTableData[i].unit = this.billingRulesForm.unitName;
              this.ruleTableData[i].inPrice = this.billingRulesForm.inPrice;
              this.ruleTableData[i].outPrice = this.billingRulesForm.outPrice;
              this.ruleTableData[i].description = this.billingRulesForm.description;
              this.billingRules = false;
              this.$message({
                message:'编辑计费规则成功',
                type:'success'
              });
              break;
            }
          }
        }else{
          let self = this;
          self.billingRulesForm.serviceId = self.currentServiceId;
          serviceItemsApi.editBillingRules(self.billingRulesForm).then(
            (response)=>{
              if(response.data.status==200){
                self.$message({
                  message:'编辑计费规则成功',
                  type:'success'
                });
                self.billingRules = false;
                self.loadBaseData(self.currentServiceId);
              }else{
                self.$message({
                  message:'编辑计费规则失败',
                  type:'error'
                });
              }
            }
          );
        }

      },
      /**
       * 计费规则详情
       */
      handleRuleDbClick(row){
        this.billingRules = true;
        this.billingRulesTitle='计费规则详情';
        this.billRuleStatus = true;
        this.ruleWay = 0;
        this.billingRulesForm.chargeId = row.chargeId;
        if(this.currentServiceId==-1){
          this.nowRuleIndex = row.rulesId;
          this.billingRulesForm.num = row.num;
          this.billingRulesForm.unitName = row.unit;
          this.billingRulesForm.inPrice = row.inPrice;
          this.billingRulesForm.outPrice = row.outPrice;
          this.billingRulesForm.description = row.description;
        }else{
          serviceItemsApi.getBillingRulesDetail(row.chargeId).then(
            (response)=>{
              this.billingRulesForm.num = response.data.data.num;
              this.billingRulesForm.unitName = response.data.data.unit;
              this.billingRulesForm.inPrice = response.data.data.inPrice;
              this.billingRulesForm.outPrice = response.data.data.outPrice;
              this.billingRulesForm.description = response.data.data.description;
            }
          );
        }

      },
      /**
       * 操作  删除计费规则
       */
      delRules(index,row,tableData){
        this.$confirm('继续点击「确认」，将删除该条计费规则，请谨慎操作', '删除提醒', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.currentServiceId==-1){
            tableData.splice(index, 1);
            this.$message({
              type: 'success',
              message: '删除计费规则成功!'
            });
          }else{
            let self = this;
            serviceItemsApi.delBillingRules(row.chargeId).then(
              (response)=>{
                if(response.data.status==200){
                  self.$message({
                    message:'删除计费规则成功',
                    type:'success'
                  });
                  self.loadBaseData(self.currentServiceId);
                }else{
                  self.$message({
                    message:'删除计费规则失败',
                    type:'error'
                  });
                }
              }
            );
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * 清空服务内容(弹框)
       */
      clearContentData(){
        this.serviceRecordForm={
          serviceContentId:null,
          content:'',
          resultType:null,
          defaultValue:'',
          optionalValue:'',
          selectItems:[null],
          minValue:'',
          maxValue:''
        };
      },
      /**
       * 添加服务内容
       */
      openContentBox(){
        this.serviceRecord=true;
        this.contentTitle = '添加服务内容';
        this.contentWay = 1;
        this.serviceContentStatus = false;
        //清空弹框数据
        this.clearContentData();
      },
      /**
       * 服务内容弹框(切换radio清空数据)
       */
      selectRadio(val){
        let self = this;
        //判断是否是详情
        if(this.oldResultType==''){

        }else{
          if(self.serviceRecordForm.resultType==1){//输入数值
            self.serviceRecordForm.minValue = '';
            self.serviceRecordForm.maxValue = '';
            self.serviceRecordForm.defaultValue = '';
          }else if(self.serviceRecordForm.resultType==2){//单选项目
            self.serviceRecordForm.selectItems =[null];
            self.serviceRecordForm.defaultValue = '';
          }else if(self.serviceRecordForm.resultType==3){//多选项目
            self.serviceRecordForm.selectItems =[null];
            self.serviceRecordForm.defaultValue = [];
          }

        }
        this.oldResultType = self.serviceRecordForm.resultType;
        self.defaultWarn = false;
      },
      /**
       * 加载服务内容表格数据
       */
      loadServiceTableData(){
        //转换类型
        for(let i=0;i<this.recordingTableData.length;i++){
          if(this.recordingTableData[i].resultType==1){
            this.recordingTableData[i].rerultTypeName = "输入";
          }else if(this.recordingTableData[i].resultType==2){
            this.recordingTableData[i].rerultTypeName = "单选";
          }else if(this.recordingTableData[i].resultType==3){
            this.recordingTableData[i].rerultTypeName = "多选";
          }
        }
      },
      /**
       * 当默认值改变时触发(添加服务内容弹框)
       */
      inputDefault(val){
        let self = this;
        if(parseInt(self.serviceRecordForm.defaultValue)>=parseInt(self.serviceRecordForm.minValue) && parseInt(self.serviceRecordForm.defaultValue)<=parseInt(self.serviceRecordForm.maxValue)){
          self.defaultWarn = false;
          return 0;
        }else{
          self.defaultWarn = true;
          return 1;
        }
      },
      /**
       * 服务内容(判断弹框内容是否为空)
       */
      isEmpty(){
        //判断服务内容名称是否为空
        if(this.serviceRecordForm.content==''){
          this.$message({
            message:'服务内容名称不能为空',
            type:'warning'
          });
          return false;
        }
        //判断当前radio数据是否为空
        if(this.serviceRecordForm.resultType==null){
          this.$message({
            message:'类型不能为空',
            type:'warning'
          });
          return false;
        }
        let len = this.serviceRecordForm.selectItems.length;//多选长度
        if(this.serviceRecordForm.resultType==1){//输入数值
          if(this.serviceRecordForm.minValue==''||this.serviceRecordForm.maxValue==''){
            this.$message({
              message:'输入数值不能为空',
              type:'warning'
            });
            return false;
          }else{//将数值赋给optionalValue
            //判断默认值范围
            if(this.serviceRecordForm.defaultValue==''){

            }else{
              if(this.inputDefault()==1){//不在所属范围
                return false;
              }
            }

            this.serviceRecordForm.optionalValue = this.serviceRecordForm.minValue
              +','
              +this.serviceRecordForm.maxValue;
          }
        }else if(this.serviceRecordForm.resultType==2||this.serviceRecordForm.resultType==3){//多选、单选
          if(len==0){
            this.$message({
              message:'选项值不能为空',
              type:'warning'
            });
            return false;
          }else if(len==1){
            if(this.serviceRecordForm.selectItems[0]==null||this.serviceRecordForm.selectItems[0]==''){
              this.$message({
                message:'选项值不能为空',
                type:'warning'
              });
              return false;
            }
          }else{
            //编辑情况下
            for(let i=0;i<len;i++){
              this.serviceRecordForm.optionalValue=this.serviceRecordForm.optionalValue
                +','
                +this.serviceRecordForm.selectItems[i];
            }
            this.serviceRecordForm.optionalValue = this.serviceRecordForm.optionalValue.substring(1);
          }
        }

      },
      /**
       * 将默认选项转换成字符串
       */
      switchDefaultValueToString(){
        let defaultValue='';
        for(let i=0;i<this.serviceRecordForm.defaultValue.length;i++){
          defaultValue = defaultValue+","+this.serviceRecordForm.defaultValue[i];
        }
        this.serviceRecordForm.defaultValue=defaultValue.substring(1);
      },
      /**
       * 弹框 增加服务内容
       */
      addContent() {
        if(this.isEmpty()==false){
          return false;
        }else{
          this.isEmpty();
        }
        if(this.serviceRecordForm.resultType==3){//多选
          //将默认选项转换成字符串
          this.switchDefaultValueToString();
        }
        if(this.currentServiceId==-1){
          this.serviceContentIndex++;
          this.serviceRecordForm.serviceContentId = this.serviceContentIndex;
          this.serviceRecordForm.optionalValue = '';
          if(this.serviceRecordForm.resultType==3||this.serviceRecordForm.resultType==2){
            for(let i=0;i<this.serviceRecordForm.selectItems.length;i++){
              this.serviceRecordForm.optionalValue=this.serviceRecordForm.optionalValue
                +','+this.serviceRecordForm.selectItems[i];
            }
            this.serviceRecordForm.optionalValue = this.serviceRecordForm.optionalValue.substring(1);
          }else if(this.serviceRecordForm.resultType==1){
            this.serviceRecordForm.optionalValue = this.serviceRecordForm.minValue
              +','
              +this.serviceRecordForm.maxValue;
          }
          this.recordingTableData.push(this.serviceRecordForm);
          this.serviceRecord = false;
          this.$message({
            message:'新增服务内容成功',
            type:'success'
          });
          this.loadServiceTableData();
          this.clearContentData();
        }else{
          let self = this;
          self.serviceRecordForm.optionalValue='';
          if(self.serviceRecordForm.resultType==3||self.serviceRecordForm.resultType==2){
            for(let i=0;i<self.serviceRecordForm.selectItems.length;i++){
              self.serviceRecordForm.optionalValue=self.serviceRecordForm.optionalValue
                +','+self.serviceRecordForm.selectItems[i];
            }
            self.serviceRecordForm.optionalValue = self.serviceRecordForm.optionalValue.substring(1);
          }else if(self.serviceRecordForm.resultType==1){
            self.serviceRecordForm.optionalValue = self.serviceRecordForm.minValue
              +','
              +self.serviceRecordForm.maxValue;
          }
          self.serviceRecordForm.serviceId =  self.currentServiceId;
          serviceItemsApi.addServiceContent(self.serviceRecordForm).then(
            (response)=>{
              if(response.data.status==200){
                self.$message({
                  message:'新增服务内容成功',
                  type:'success'
                });
                self.serviceRecord = false;
                self.loadBaseData(self.currentServiceId);
              }else{
                self.$message({
                  message:'新增服务内容失败',
                  type:'error'
                });
              }
            }
          );
        }
      },
      /**
       * 操作  编辑计费规则
       */
      editRules(row){
        this.handleRuleDbClick(row);
        this.billingRulesTitle='编辑计费规则';
        this.ruleWay = 2;
        this.billRuleStatus = false;
      },
      /**
       * 弹框 编辑服务内容(提交)
       */
      editContent(){
        if(this.isEmpty()==false){
          return false;
        }else{
          this.isEmpty();
        }
        if(this.serviceRecordForm.resultType==3){//多选
          //将默认选项转换成字符串
          this.switchDefaultValueToString();
        }
        if(this.currentServiceId==-1){
          for(let i=0;i<this.recordingTableData.length;i++){
            if(this.nowContentIndex==this.recordingTableData[i].serviceContentId){
              this.recordingTableData[i].content = this.serviceRecordForm.content;
              //switch resultType
              if(this.serviceRecordForm.resultType==1){
                this.recordingTableData[i].rerultTypeName = '数值';
              }else if(this.serviceRecordForm.resultType==2){
                this.recordingTableData[i].rerultTypeName = '单选';
              }else if(this.serviceRecordForm.resultType==3){
                this.recordingTableData[i].rerultTypeName = '多选';
              }
              this.recordingTableData[i].selectItems = this.serviceRecordForm.selectItems;
              this.recordingTableData[i].minValue = this.serviceRecordForm.minValue;
              this.recordingTableData[i].maxValue = this.serviceRecordForm.maxValue;
              this.recordingTableData[i].defaultValue = this.serviceRecordForm.defaultValue;
              this.serviceRecord = false;
              this.$message({
                message:'编辑服务内容成功',
                type:'success'
              });
              this.clearContentData();
              break;
            }
          }
        }else{
          let self = this;
          self.serviceRecordForm.optionalValue='';
          if(self.serviceRecordForm.resultType==3||self.serviceRecordForm.resultType==2){
            for(let i=0;i<self.serviceRecordForm.selectItems.length;i++){
              self.serviceRecordForm.optionalValue=self.serviceRecordForm.optionalValue
                +','+self.serviceRecordForm.selectItems[i];
            }
            self.serviceRecordForm.optionalValue = self.serviceRecordForm.optionalValue.substring(1);
          }else if(self.serviceRecordForm.resultType==1){
            self.serviceRecordForm.optionalValue = self.serviceRecordForm.minValue
              +','
              +self.serviceRecordForm.maxValue;
          }
          self.serviceRecordForm.serviceId =  self.currentServiceId;
          serviceItemsApi.editServiceContent(self.serviceRecordForm).then(
            (response)=>{
              if(response.data.status==200){
                self.$message({
                  message:'编辑服务内容成功',
                  type:'success'
                });
                self.serviceRecord = false;
                self.loadBaseData(self.currentServiceId);
              }else{
                self.$message({
                  message:'编辑服务内容失败',
                  type:'error'
                });
              }
            }
          );
        }
      },
      /**
       * 操作  删除服务内容
       */
      delRecording(index,row,tableData){
        this.$confirm('继续点击「确认」，将删除该条服务内容，请谨慎操作', '删除提醒', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.currentServiceId==-1){
            tableData.splice(index, 1);
            this.$message({
              message:'删除服务内容成功',
              type:'success'
            });
          }else{
            let self = this;
            serviceItemsApi.delServiceContent(row.contentId).then(
              (response)=>{
                if(response.data.status==200){
                  self.$message({
                    message:'删除服务内容成功',
                    type:'success'
                  });
                  self.loadBaseData(self.currentServiceId);
                }else{
                  self.$message({
                    message:'删除服务内容失败',
                    type:'error'
                  });
                }
              }
            );
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * 操作  编辑服务内容
       */
      editRecording(row){
        this.handleContentDbClick(row);
        this.contentTitle = '编辑服务内容';
        this.contentWay = 2;
        this.serviceContentStatus = false;
      },
      /**
       * 服务内容详情
       */
      handleContentDbClick(row){
        this.oldResultType = '';
        this.serviceRecord=true;
        this.contentTitle = '服务内容详情';
        this.serviceContentStatus = true;
        this.contentWay = 0;
        this.serviceRecordForm.contentId = row.contentId;
        if(this.currentServiceId==-1){//新增服务项目情况下
          this.nowContentIndex = row.serviceContentId;
          this.serviceRecordForm.content = row.content;
          this.serviceRecordForm.resultType = row.resultType;
          this.serviceRecordForm.selectItems = row.selectItems;
          if(this.serviceRecordForm.resultType==3){//多选
            let defaultValue = row.defaultValue.split(',');
            this.serviceRecordForm.defaultValue = defaultValue;
          }else{
            this.serviceRecordForm.defaultValue = row.defaultValue;
          }
          this.serviceRecordForm.minValue = row.minValue;
          this.serviceRecordForm.maxValue = row.maxValue;
        }else{//编辑、详情
          let self = this;
          serviceItemsApi.getServiceContentDetail(row.contentId).then(
            (response)=>{
              if(response.data.status==200){
                self.serviceRecordForm.content = response.data.data.content;
                self.serviceRecordForm.resultType = response.data.data.resultType;
                let selectItems = response.data.data.optionalValue.split(',');

                if(self.serviceRecordForm.resultType==2||self.serviceRecordForm.resultType==3){
                  if(selectItems.length==0){
                    self.serviceRecordForm.selectItems = [null];
                  }else{
                    self.serviceRecordForm.selectItems = selectItems;
                  }
                }else{
                  self.serviceRecordForm.minValue = selectItems[0];
                  self.serviceRecordForm.maxValue = selectItems[1];
                }

                if(self.serviceRecordForm.resultType==3){//多选
                  self.serviceRecordForm.defaultValue = response.data.data.defaultValue.split(',');
                }else{
                  self.serviceRecordForm.defaultValue = response.data.data.defaultValue;
                }
              }
            }
          );
        }

      },
      /**
       * 增加选择项
       */
      addSelectItem(index){
        this.serviceRecordForm.selectItems.push(null);
      },
      /**
       * 删除选择项
       */
      removeSelectItem(item,i) {
        var _index = this.serviceRecordForm.selectItems.indexOf(item)
        if (_index !== -1) {
          this.serviceRecordForm.selectItems.splice(_index, 1);
          //delete the item in defaultItem
          if(this.serviceRecordForm.resultType==2){//单选
            if(item==this.serviceRecordForm.defaultValue){
              this.serviceRecordForm.defaultValue='';
            }
          }else if(this.serviceRecordForm.resultType==3){//多选
            for(let k=0;k<this.serviceRecordForm.defaultValue.length;k++){
              if(item==this.serviceRecordForm.defaultValue[k]){
                this.serviceRecordForm.defaultValue.splice(k,1);
              }
            }
          }
        }
      },
      /**
       * 添加服务内容输入值(判断前面的是否小于后面的)
       */
      selectNormalNum(val){
        if(this.serviceRecordForm.minValue==''){
          this.$message({
            showClose: true,
            message: '请输入最小值',
            type: 'warning'
          });
          return;
        }else if(this.serviceRecordForm.maxValue==''){
          this.$message({
            showClose: true,
            message: '请输入最大值',
            type: 'warning'
          });
          return;
        }else if(this.serviceRecordForm.minValue>this.serviceRecordForm.maxValue){
          this.$message({
            showClose: true,
            message: '最小值不能大于最大值',
            type: 'warning'
          });
          return;
        }
      },
    },
    mounted: function () {
      this.init();
    },
    components:{
      quillEditor
    },
    computed:{
//      contentType:function(){
//        return this.serviceRecordForm.resultType;
//      },
    },
    watch:{
//      contentType:function(){
//        this.selectRadio();
//      },
    }
  }
</script>
<style>
.addServcieItems .warn{
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
}
.addServcieItems .panel-title.free{
  margin-top: 115px;
}
.addServcieItems .el-select-dropdown{
  z-index:2006!important;
}
.addServcieItems .unitInput .el-input__inner{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.addServcieItems .unitSelect .el-input__inner{
  border-left:none;
  border-top-left-radius:0;
  border-bottom-left-radius: 0;
}
.addServcieItems .tips{
  width: 325px;
  padding-left:0;
  color: #999999;
  padding-top: 8px;
}
.addServcieItems .tips p{
  line-height:20px;
}
.addServcieItems .defaultWarn{
  color:red;
  font-size: 12px;
  margin-bottom:10px;
  margin-top:-5px;
}
.addServcieItems .des .el-form-item__error{
  margin-top:60px;
}
.addServcieItems .addItems{
  margin-left:5px;
}
</style>
